<template>
  <nut-fixed-nav
    v-model:visible="visible"
    :position="{ top: '580px' }"
    type="right"
  >
    <template #list>
      <ul class="nut-fixed-nav__list">
        <li class="nut-fixed-nav__item">
          <img
            src="../../../state/image.png"
            alt="Profile"
            class="nut-fixed-nav__avatar"
          />
        </li>
        <li class="nut-fixed-nav__item">
          <img
            v-show="!obj.status"
            src="../../../state/zant.svg"
            alt="Active"
            class="nut-fixed-nav__status"
            @click="startMusic"
          />
          <img
            v-show="obj.status"
            src="../../../state/暂停.png"
            alt="Inactive"
            class="nut-fixed-nav__status"
            @click="stopMusic"
          />
        </li>
        <li class="nut-fixed-nav__item">
          <h3 class="nut-fixed-nav__name">{{ obj.name }}</h3>
        </li>
      </ul>
    </template>
    <template #btn>
      <img
        src="../../../state/u169.svg"
        alt="Button"
        class="nut-fixed-nav__button"
      />
    </template>
  </nut-fixed-nav>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { watch } from "vue";
import { Retweet } from "@nutui/icons-vue";
import { useDateStore } from "../../stores/dataStore";
import { storeToRefs } from "pinia";
import { onMounted, onUnmounted } from 'vue';
import { eventBus } from './EventBus';
const audioStore = useDateStore();
const dataStore = useDateStore();
let { obj } = storeToRefs(dataStore);
let { start, end, play, pause } = dataStore;

const startMusic = () => {
  play();
  let name = localStorage.getItem('isPlaying')
  start(name, id)
};

const stopMusic = () => {
  pause();
  let name = localStorage.getItem('isPlaying')
  end(name, id)
};
// const  audio = new Audio()
onMounted(() => {
  eventBus.addEventListener('togglePlay', (event) => {
    const { isPlaying } = event.detail;
    // 根据 isPlaying 值执行操作
  });
});

onUnmounted(() => {
  eventBus.removeEventListener('togglePlay', () => {});
});
// watch(
//   () => dataStore.obj.status,
//   (newStatus) => {
//     if (newStatus) {
//       audio.play();
//     } else {
//       audio.pause();
//     }
//   }
// );
let id = ref(1);
id = localStorage.getItem("id");

const visible = ref(false);
</script>

<style scoped>
.nut-fixed-nav__list {
  display: flex;
  align-items: center;
  width: 370px;
  padding: 20px;
  padding-right: 120px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-color: #fff;
}
ul {
  list-style: none;
}
.nut-fixed-nav__item {
  margin-right: 15px;
}

.nut-fixed-nav__avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  object-fit: cover;
}

.nut-fixed-nav__status {
  width: 25px;
  height: 30px;
}

.nut-fixed-nav__name {
  margin: 0;
  font-size: 13px;
  color: #333;
}

.nut-fixed-nav__button {
  width: 30px;
  height: 30px;
}
</style>
